<template>
  <div v-loading="loading" ref="myDiv" style="height: 100%;;width:100%;" >
    <el-col :span='4' v-if="this.away" class="homeleft" :style="{ width:this.pageWidth+'px' }">
      <div style="height:48px;width:100%;float: left;">
        <span class="dhlb">对话列表</span>
        <el-button style="float: right;height: 100%;width: 34%;color: #2468F2;margin: 2px 12px;" type="text" @click="Newdialogue()">+ 新建对话</el-button>
      </div>
      <div style="height: 93%;width: 100%;float: left;overflow-y: scroll;" :key="this.menulist1.length+this.visible">
        <el-menu default-active="1" class="el-menu-vertical-demo-dialoge"  >
          <el-menu-item  v-if="this.flag"  index="0" >
            <span slot="title">
              <el-input v-model="input" placeholder="新建对话1"></el-input>
              <i class="el-icon-circle-check" @click="Submit()"></i>
              <i class="el-icon-circle-close" @click="Newdateclose()"></i>
            </span>
          </el-menu-item>
          <el-menu-item v-for="(item, index) in this.menulist1" :ref="index" :key="index+1" :index="JSON.stringify(index+1)" @click="handleSelect(JSON.stringify(index+1),item)" >
            <div style="width: 100%;height: 100%;" @mouseover.stop="handleMouseOver(item)" @mouseout.stop="handleMouseOut(item)">
              <div v-if="flag3&&editlist.id === item.id" style="background-color: #fbfbfb;">
                <el-input v-model="nuedialo" id="selectableInput" :placeholder="item.groupName"></el-input>
                <div style="float: right;width: 55px;height:20px;margin-top: 5px;">
                  <img src="~@/assets/images/static/check.png" class="compile-image" @click="Submit()"/>
                  <img src="~@/assets/images/static/close.png" class="compile-image" @click="updateclose()"/>
                </div>
                <!-- <i class="el-icon-circle-check" @click="Submit()"></i>
                <i class="el-icon-circle-close" @click="updateclose()"></i> -->
              </div>
              <span :class="colortpye ===item.id? 'menuitem':''" v-if="(!flag3||editlist.id != item.id)" slot="title">
                <span v-if="item.groupName.length>10" class="textellipsis" ref="textSpan">
                  <el-tooltip class="item" effect="dark" :content="item.groupName" placement="top">
                    <span>&nbsp;&nbsp;{{item.groupName}}</span>
                  </el-tooltip>
                </span>
                <span v-if="item.groupName.length<=10" style="margin-left: 12px;">{{item.groupName}}</span>
              </span>
              <el-dropdown trigger="hover" v-if="!flag3||editlist.id != item.id" >
                <span class="el-dropdown-link">
                  <!-- <i  v-show="hoveflag&&hoveeditlist.id === item.id" class="el-icon-more"></i> -->
                  <div v-show="hoveflag&&hoveeditlist.id === item.id" style="margin-top: -4px;">
                    <img src="~@/assets/images/static/3dian.png" style="width: 14px;margin-right: 16px;" />
                  </div>
                </span>
                <el-dropdown-menu slot="dropdown" class="my-dropdown">
                  <el-dropdown-item ><span @click="compile(item)">重命名</span> </el-dropdown-item>
                  <!-- <el-dropdown-item ><span @click="deleteconfirm(item)">删除</span> </el-dropdown-item> -->
                  <el-dropdown-item >
                    <div class="my-popover">
                      <el-popover
                        placement="top"
                        width="240"
                        >
                        <p>&nbsp;删除后将不可恢复，确定删除？</p>
                        <div style="text-align: right; margin: 0">
                          <el-button style="background-color: #2468F2;color: white;width: 72px;height: 32px;" type="primary" size="mini" @click="deleteconfirm(item)">确定</el-button>
                          <el-button style="border: 1px solid #E9E9E9;width: 72px;height: 32px;color: black;margin-right: 42px;" size="mini" type="text" @click="deletevisible()">取消</el-button>
                        </div>
                        <!-- <el-button slot="reference">删除</el-button> -->
                        <span slot="reference" >删除</span>
                      </el-popover>
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-menu-item>
        </el-menu>
      </div>
    </el-col>
    <el-col :span="20" class="homeright" :style="{ width:this.tpyeWidth+'px',height:'100%' }">
      <img v-if="this.away"  src="~@/assets/images/shouqi.png" class="centered-image" @click="Putitaway()"/>
      <img v-if="!this.away"  src="~@/assets/images/zhankai.png" class="centered-image" @click="Putitaway()"/>
      <div style="margin-left: 10px;margin-right: 10px;width:100%;height:100%">
        <dialogue-index :listdata="this.listdata" :pageWidth="this.tpyeWidth" :key="this.listdata.id" @backhaul="backhaulchange"/>
      </div>
    </el-col>
  </div>
</template>

<script>
import DialogueIndex from './dialogueIndex.vue';
import {dialoguequery,adddialogue,deletedialogue,putdialogue} from "@/api/baiduapi";


export default {
  name: "Login",
  components: {
    DialogueIndex,
  },
  props:{
  },
  data() {
    return {
      hoveflag:false,
      hoveeditlist:'',
      isCollapse:false,
      menulist1:[ ],
      input: '新建对话',
      nuedialo: '',
      flag:false,
      flag2:'',
      flag3:false,
      editlist:'',
      away:true,
      fileList: [],
      listdata:{},
      pageWidth: 0,
      tpyeWidth: 0,
      Widthh:0,
      colortpye:'',
      loading:true,
      isOverflowing:false,
      visible:true,
      index:0,
    };
  },
  created() {
  },
  mounted () {
    this.handle()
    this.observeDivWidth();
    // this.checkTextOverflow();
    // window.addEventListener('resize', this.checkTextOverflow); // 监听窗口大小变化
  },
  methods: {
    handleVbChange(e){
      console.log(e)
      if(e){
        this.hoveflag = false
      }
    },
    handleMouseOver(item) {  
      this.hoveflag = true
      this.hoveeditlist = item
      console.log('鼠标悬浮到菜单项上');  
      // 在这里执行你想要的逻辑  
    },  
    handleMouseOut(item) {  
      // setTimeout(() => {  
        this.hoveflag = false
        this.hoveeditlist = item
        console.log('鼠标从菜单项上移开');  
        // this.keyys++
      // }, 5000);  
      // 在这里执行你想要的逻辑  
    },  
    observeDivWidth() {
      const myDiv = this.$refs.myDiv;
      const observer = new ResizeObserver(entries => {
        for (let entry of entries) {
          this.Widthh = entry.borderBoxSize[0].inlineSize
          this.pageWidth= 240
          this.tpyeWidth= this.Widthh-240
          // console.log('Div width tpyeWidth:', this.tpyeWidth);
          // 你可以在这里执行其他逻辑
        }
      });
      observer.observe(myDiv);
    },
    checkTextOverflow() {
      const textSpan = this.$refs.textSpan;
      console.log('textSpan',textSpan)
      const scrollWidth = textSpan.scrollWidth;
      const clientWidth = textSpan.clientWidth;

      this.isOverflowing = scrollWidth > clientWidth;
      console.log('this.isOverflowing',this.isOverflowing)
      // 根据是否溢出设置样式或执行其他操作
      if (this.isOverflowing) {
        textSpan.classList.add('overflowing');
      } else {
        textSpan.classList.remove('overflowing');
      }
    },
    handleResize() {
      if(this.away){
        this.pageWidth = 240
        this.tpyeWidth = this.Widthh-240
      }else{
        this.pageWidth = 0
        this.tpyeWidth = this.Widthh
      }
      // console.log('this.pageWidth',this.pageWidth)
    },
    Collapse(){
      this.isCollapse = !this.isCollapse
    },
    compile(item){
      this.input=''
      // console.log('jinlaile',item)
      this.flag3 = !this.flag3
      this.editlist = item
      this.nuedialo = item.groupName
      this.$nextTick(() => {  
        const tableInput =document.getElementById('selectableInput')
        // console.log('tableInput',tableInput)
        tableInput.focus()
        tableInput.select()
      });  
    },
    handle() {
      dialoguequery().then(res => {
        const tenantId = res.data;
        this.menulist1=tenantId.list
        console.log('menulist1',this.menulist1)
        if(this.menulist1.length != 0){
          this.handleSelect(1,this.menulist1[0])
        }
        setTimeout(() => {
          this.loading = false
        }, 1000);
      });
    },
    handleSelect(key,item) {
      console.log('123',item)
      this.listdata=[]
      // console.log('key',key)
      if(item !== undefined){
        this.listdata = item
        this.listdata.type = '1'
        // console.log('listdata',this.listdata)
        this.filename = item.filename
        this.colortpye = item.id
        console.log('this.colortpye',this.colortpye)
      }
    },
    Newdialogue(){
      this.flag = false
      this.flag3 = false
      if(this.index === 0){
        this.input ='新建对话'
      }else{
        this.input ='新建对话'+this.index
      }
      // this.listdata={}
      this.Submit()
    },
    Newdateclose(){
      this.flag = !this.flag
      // console.log('新建对话取消')
      dialoguequery().then(res => {
        const tenantId = res.data;
        this.menulist1=tenantId.list
        this.handleSelect(1,this.menulist1[0])
      });
    },
    Submit() {  // 重命名和添加
      console.log('触发更新')
      console.log('this.input',this.input)
      if(this.input!=''){
        const data1 = {groupName:this.input }
        adddialogue(data1).then(res => {
          console.log('新建成功了')
          dialoguequery().then(res => {
            const tenantId = res.data;
            this.menulist1=tenantId.list
            this.handleSelect(1,this.menulist1[0])
          });
        });
        this.flag = false
        this.index++
        this.input ='新建对话'+this.index
      }else{
        if(this.nuedialo!=''){
          this.flag3 = !this.flag3
          const data1 = {id: this.editlist.id,groupName:this.nuedialo }
          putdialogue(data1).then(res => {
            console.log('更新成功')
            dialoguequery().then(res => {
              const tenantId = res.data;
              this.menulist1=tenantId.list
            });
          });
          this.nuedialo =''
          this.input ='新建对话'+this.index
        }else {
          this.flag3 = !this.flag3
        }
      }
    },
    Putitaway(){
      this.away = !this.away
      this.handleResize()
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    deleteconfirm(item){
      console.log('删除进来了',item)
      // this.$modal.confirm('删除后将不可恢复，确定删除?').then(function () {

      // }).then(response => {
      this.deletedialogue(item);
      var content = document.getElementById('popover');
      console.log('content',content)
      // content.style.display = 'none';
      // }).catch(() => {});
    },
    deletevisible(){
      this.visible = !this.visible
    },
    deletedialogue(item){
      deletedialogue(item.id).then(res => {
        console.log('删除成功')
        dialoguequery().then(res => {
          const tenantId = res.data;
          this.menulist1=tenantId.list
          this.handleSelect(1,this.menulist1[0])
        });
      });
    },
    updateclose(){
      this.flag3 = !this.flag3
      // console.log('重命名取消')
    },
    backhaulchange(data){
      console.log('回调data',data)
      this.menulist1 = data
      this.handleSelect(1,this.menulist1[0])
    }
  },
  destroyed() {
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkTextOverflow); // 组件销毁前移除监听器
  },

};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/login.scss";
.homeleft {
  height: 94.5vh;
  // width: 330px;
  // min-width: 20%;
  // box-shadow: 5px 5px 10px #00000021;
  background-color: #fbfbfb;
  // overflow-y: scroll; /* 添加垂直滚动条 */
}
::-webkit-scrollbar {
    width: 0px; /* 控制滚动条宽度 */
}



::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* 控制滚动条背景色 */
}
.dialogue_component{
  margin-left: 5%;
}
.input_body{
  width: 100%;
  text-align: center;
}
.homeright {
  background-image: url('~@/assets/images/bg@3x.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  // width: auto;
  background-color: #F5F9FF;
  display: flex;
  // padding-left: 32px;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如果也需要水平居中的话 */
}
.centered-image {
  width:15px;
  max-width: 100%; /* 确保图片不会超出容器 */
  height: auto; /* 保持图片的宽高比 */
}
.compile-image {
  width:18px;
  max-width: 100%; /* 确保图片不会超出容器 */
  height: auto; /* 保持图片的宽高比 */
  margin-left: 8px;
}
.dhlb {
  // width: 73px;
  // min-width: 20%;
  // height: 100%;
  float: left;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  font-size: 14px;
  margin: 16px;
  font-weight: 600;
}
.el-menu {
  border-right: solid 1px #ececec00;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #ffffff00;
}

.el-menu-item * {
  vertical-align: baseline;
}
.el-dropdown {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 14px;
  float: right;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 160px;
}
.menuitem {
  height: 100%;
  width: 111%;
  background-color: #E6F0FF;
  border-radius: 10px;
  align-items: center;
  display: contents;
}
.el-menu-item:hover, .el-menu-item:focus {
  outline: none;
  background-color: #E6F0FF;
}
.el-menu-vertical-demo-dialoge .el-menu-item {
  height: 41px;
  width: 90%;
  margin-left: 5%;
  border-radius: 6px;
  line-height: 41px;
  font-size: 14px;
  color: #303133;
  padding: 0 0px;
  padding-left: 0px !important;
  margin-top: 2%;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}
.textellipsis {
  position: relative; /* 为伪元素定位做准备 */
  width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  float: left;
}
.el-menu-item.is-active {
  color: #2468F2;
}
.el-dropdown-menu {  
  /* 设置下拉菜单的样式 */  
  min-width: 0px !important;
}  
:deep(.el-input__inner) {
  // 设置光标颜色
  border-color: #144BCC !important;
}
:deep(.el-input__inner:hover) {
  border-color: #144BCC !important;
}
:deep(.el-input--medium .el-input__inner) {
  height: 36px;
  line-height: 35px;
}

// .textellipsis:hover {
//   display: block; /* 鼠标悬停时显示全称 */
//   position: absolute; /* 绝对定位全称文本 */
//   top: 100%; /* 将全称文本放在原文本的下方 */
//   left: 0; /* 对齐到原文本的左侧 */
//   padding: 4px; /* 可选，增加一些内边距使文本更易读 */
//   background-color: #f0f0f0; /* 可选，为全称文本添加一个背景色 */
//   border: 1px solid #ccc; /* 可选，为全称文本添加一个边框 */
// }

</style>
<style lang="scss" >
.el-popover {
  position: absolute;
  background: #FFFFFF;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  padding: 12px;
  z-index: 2000;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-all;
  margin-top: -215px !important;
}
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
  background-color: #e8f4ff;
  color: #2468F2;
}
// .el-dropdown-menu el-popper el-dropdown-menu--medium
// :deep .deleteconfirm .el-dropdown-menu {
//   width: 10px !important;
// }
// .el-dropdown-menu {
//   width: 10px !important;
// }

.my-dropdown{
  width: 78px !important;
}
</style>
